
<style>
.articleManage .option-div{
  overflow: hidden;

}
.articleManage .option-div .button button{
  width: 80px;
}
.articleManage .option-div .button{
  float: left;
}
.articleManage .option-div .search{
  float: right;
  overflow: hidden;
  margin-right: 20px;
  color: #777;
  font-weight: 700;
}

.articleManage .option-div .search .title{
  float: left;
  
}
.articleManage .option-div .search .parentCategory{
  float: left;
  margin-right: 10px;
 
}

.articleManage .option-div .search .parentCategory select,.articleManage .option-div .search .title input{
  width: 170px;
  height: 32px;
  margin-left: 10px;
  border: 1px solid #2bc5ac;
  border-radius: 5px;
  color: #777;
}


.articleManage .articleManageTable{
  width: 100%;
  line-height: 40px;
  border-collapse: collapse;
  text-align: left;
  color: #777;
  font-size:12px ;
  
}
.articleManage .articleManageTable td{
  border: none;
  border-bottom: 1px solid rgb(194, 192, 192);
}
.articleManage .articleManageTable a{
  color: #777;
}
.articleManage .articleManageTable th:last-child{
  text-align: center;
}
.articleManage .articleManageTable td:last-child{
  text-align: center;
}
</style>








<div class="articleManage">
  
  <div class="option-div">
    <div class="button">
      <button class="btn btn-success">发布咨询</button>
    </div>
    <div class="search">
      <div class="parentCategory">
        所属栏目
        <select name="parentCategory" id="">
          <option disabled selected hidden>请选择</option>
          <option value="">通知公告</option>
          <option value="">校园新闻</option>
          <option value="">学术活动</option>
          <option value="">媒体聚焦</option>
          <option value="">学院快讯</option>
        </select>
        
      </div>
      <div class="title">
        标题<input type="text">
      </div>
    </div>
  </div>
  <div>
    <table class="articleManageTable">
      <thead>
        <th>序号</th>
        <th>标题</th>
        <th>发布日期</th>
        <th>所属栏目</th>
        <th>操作</th>
      </thead>
      <tbody>
        <td>序号</td>
        <td>标题</td>
        <td>发布日期</td>
        <td>所属栏目</td>
        <td>操作</td>
      </tbody>
    </table>
  </div>
</div>



<script>
  myAjax.get(api.ARTICLE_FINDALL).then((res)=>{
      //清空节点
      $(".articleManage tbody").empty();
      console.log(res)
      let arr=res.data;
      if(arr.length>0){
        arr.forEach((item,index)=>{
          $(".articleManage tbody").append($(`
          <tr>
          <td>${index+1}</td>
          <td>${item.title}</td>
          <td>${new Date(item.publishTime).toLocaleDateString()}</td>
          <td>${item.categoryId}</td>
          <td>
            <a href="#">查看</a>
            <a href="#">编辑</a>
            <a href="#">修改</a>
          </td>
        </tr>`))
        })
      }
    })
  </script>